<!-- 首页 -->
<template>
  <div class="index-container">
    <div class="banner-box">
      <van-swipe :autoplay="3000" :height="200">
        <van-swipe-item @click="GoToGoodsOrder(1)">
          <van-image :src="Banner1" />
        </van-swipe-item>
        <van-swipe-item @click="GoToGoodsOrder(2)">
          <van-image :src="Banner2" />
        </van-swipe-item>
        <van-swipe-item @click="GoToGoodsOrder(3)">
          <van-image :src="Banner3" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-tabs v-model:active="active" @click="tabsChange()" animated>
      <van-tab title="推荐">
        <div class="list-box" v-if="active == 0">
          <div class="list-left" v-if="goodsListLeft.length">
            <template v-for="item in goodsListLeft" :key="item">
              <GoodItem :goodsItemDetail="item" />
            </template>
          </div>
          <div class="list-right" v-if="goodsListRight.length">
            <template v-for="item in goodsListRight" :key="item">
              <GoodItem :goodsItemDetail="item" />
            </template>
          </div>
        </div>
      </van-tab>
      <van-tab title="新品">
        <div class="anchor-main-list" v-if="active == 1">
          <div class="list-img-box">
            <div
              class="list-img-item"
              v-for="item in goodsList"
              :key="item.h5Id"
            >
              <div class="timer-box">
                <van-image
                  width="48"
                  height="48"
                  round
                  :src="'http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/183b20029c094cca98deb00d2c6965a4.jpg?x-oss-process=image/resize,w_100,h_200'"
                  fit="cover"
                />
                <p>糖糖</p>
              </div>
              <div class="anchor-box">
                <AnchorItem :dateItemDetail="item" />
                <p>2024-05-07</p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import Banner1 from "@/assets/image/01.png";
import Banner2 from "@/assets/image/02.png";
import Banner3 from "@/assets/image/03.png";

import GoodItem from "@/components/goodsItem/index.vue";
import AnchorItem from "@/components/anchorItem/index.vue";

import { GetRecommendPage, GetNewPhotosPage } from "@/api/index";

const route = useRoute();

const state = reactive({
  Banner1,
  Banner2,
  Banner3,
  goodsList: [],
});

const { goodsList } = toRefs(state);

const goodsListLeft = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 1)
);

const router = useRouter();

const GoToGoodsOrder = (index) => {
  let item = state.goodsList[index];
  router.push({
    path: "/goodDetail",
    query: {
      goodId: item.anchorId,
    },
  });
};

let anchorList = ref([]);
let anchorPhotoList = ref([]);

const GetAnchorList = async () => {
  let { data } = await GetRecommendPage();
};

const GetNewPhotos = async () => {
  let { data } = await GetNewPhotosPage();
};

let active = ref(0);

const tabsChange = () => {
  state.goodsList =
    active.value == 0 ? anchorList.value : anchorPhotoList.value;
  console.log(active.value, 11);
};

onMounted(() => {
  tabsChange();
});
</script>



<style lang="scss" scoped>
.index-container {
  background: #f2f2f2;
  overflow: auto;
  padding-bottom: 80px;
}

.banner-box {
  background-color: #fff;
  margin-bottom: 5px;
}

.van-image {
  width: 100%;
  height: 200px;
}
</style>
